<template>
	<div>
		<el-container>
			<!--添加弹出框-->
			<el-dialog title="新增学生信息" :visible.sync="dialogVisible" :before-close="handleClose">
				<span>
					<el-divider content-position="left">基本信息</el-divider>
					<el-form :inline="true" :model="addstudent" class="demo-form-inline" size="mini">
						<el-form-item label="学号 :">
							<el-input v-model="addstudent.snumber" placeholder="学号" style="width:150px"></el-input>
						</el-form-item>
						<el-form-item label="班级 :">
							<el-input v-model="addstudent.class" placeholder="班级" style="width:150px"></el-input>
						</el-form-item>
						<el-form-item label="姓名 :">
							<el-input v-model="addstudent.name" placeholder="姓名" style="width:150px"></el-input>
						</el-form-item>
						<el-divider content-position="left">各科成绩</el-divider>
						<el-form-item label="近代史 :">
							<el-input v-model="addstudent.jinglan" placeholder="近代史" style="width:70px"></el-input>
						</el-form-item>
						<el-form-item label="马概 :">
							<el-input v-model="addstudent.malan" placeholder="马概" style="width:70px"></el-input>
						</el-form-item>
						<el-form-item label="英语二 :">
							<el-input v-model="addstudent.yinglan" placeholder="英语二" style="width:70px"></el-input>
						</el-form-item>
						<el-form-item label="C语言 :">
							<el-input v-model="addstudent.clan" placeholder="C语言" style="width:70px"></el-input>
						</el-form-item>
						<el-form-item label="数据库 :">
							<el-input v-model="addstudent.shulan" placeholder="数据库" style="width:70px"></el-input>
						</el-form-item>
					</el-form>
				</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
					<el-button type="primary" size="mini" @click="add">添 加</el-button>
				</span>
			</el-dialog>
			<!--编辑的弹出框-->
			<el-dialog title="编辑学生信息" :visible.sync="centerDialogVisible" width="30%" center>
				<span>需要注意的是内容是默认不居中的</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" >确认编辑</el-button>
				</span>
			</el-dialog>
			<!--头部-->
			<el-header>
				<i class="el-icon-s-platform"></i>学生成绩管理系统2.0
			</el-header>
			<!--搜索表单-->
			<el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
				<el-form-item label="学号">
					<el-input v-model="formInline.user" placeholder="学号查询"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="formInline.user" placeholder="模糊查询"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="dialogVisible = true">添加</el-button>
				</el-form-item>
			</el-form>
			<el-main>
				<el-table :data="studentslist" border style="width: 100%">
					<el-table-column fixed prop="snumber" label="学号"></el-table-column>
					<el-table-column prop="class" label="班级"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="jinlan" label="近代史"></el-table-column>
					<el-table-column prop="malan" label="马概"></el-table-column>
					<el-table-column prop="yinglan" label="英语二"></el-table-column>
					<el-table-column prop="clan" label="C语言"></el-table-column>
					<el-table-column prop="shulan" label="数据库"></el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<el-button type="primary" @click="edit(scope.row._id)">编辑</el-button>
							<el-button type="danger" @click="remove(scope.row._id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addstudent: {
					snumber: "",
					class: "",
					name: "",
					jinglan: "",
					malan: "",
					yinglan: "",
					clan: "",
					shulan: "",
				},
        dialogVisible: false,
        centerDialogVisible: false,
				formInline: {
					user: "",
					region: "",
				},
				studentslist: [],
			};
		},
		methods: {
      add() {
        this.$http.post('students', this.addstudent).then(() => {
					//清空录入框信息：
					this.addstudent = {};
					//隐藏录入框：
					this.dialogFormVisible = false;
					this.$message({
						message: '录入成功',
						type: 'success'
					});
				})
      },
			onSubmit() {
				console.log("submit!");
			},
			handleClick(row) {
				console.log(row);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		mounted: {
			updata() {
				this.$http.put("api/confirmUpdata/");
			}
		}
	};
</script>

<style lang="less" scoped>
	.el-header {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
		margin-bottom: 10px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	// .el-main {
	//   background-color: #e9eef3;
	//   color: #333;
	//   text-align: center;
	//   line-height: 160px;
	// }
	.el-form {
		text-align: center;
		justify-content: center;
	}
</style>
